<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站管理页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        .website-card {
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .website-card.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .website-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            z-index: 10;
        }
        
        .category-badge {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .category-badge:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
        
        .nav-link {
            transition: all 0.2s ease;
        }
        
        .nav-link:hover {
            transform: translateY(-2px);
        }
        
        .btn {
            transition: all 0.2s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .modal-content {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .modal-header {
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            color: white;
        }
        
        .page-title {
            background: linear-gradient(135deg, #6c5ce7, #fd79a8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }
        
        .card-header {
            background: linear-gradient(to right, #f5f7fa, #c3cfe2);
        }
        
        /* 预定义一些颜色类 */
        .category-color-0 { background-color: #FF6B6B !important; color: white !important; }
        .category-color-1 { background-color: #4ECDC4 !important; color: white !important; }
        .category-color-2 { background-color: #45B7D1 !important; color: white !important; }
        .category-color-3 { background-color: #FFBE0B !important; color: white !important; }
        .category-color-4 { background-color: #FB5607 !important; color: white !important; }
        .category-color-5 { background-color: #8338EC !important; color: white !important; }
        .category-color-6 { background-color: #3A86FF !important; color: white !important; }
        .category-color-7 { background-color: #38B000 !important; color: white !important; }
        .category-color-8 { background-color: #9D4EDD !important; color: white !important; }
        .category-color-9 { background-color: #FF006E !important; color: white !important; }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .staggered-animation {
            animation: fadeInUp 0.6s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .nav-tabs .nav-link.active {
            animation: bounceIn 0.5s;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.8);
                opacity: 0;
            }
            70% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .card-footer .btn {
            margin: 0 2px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- 页面标题 -->
                <h1 class="my-4 page-title animate__animated animate__pulse" th:text="${pageTitle}">网站管理系统</h1>
                
                <!-- 分类导航 -->
                <ul class="nav nav-tabs mb-4 justify-content-center">
                    <li class="nav-item mx-1">
                        <a class="nav-link [[${activeCategory == 'all' ? 'active' : ''}]] animate__animated animate__fadeIn" 
                           href="/">全部</a>
                    </li>
                    <li class="nav-item mx-1" th:each="category,iterStat : ${categories}">
                        <a class="nav-link [[${activeCategory == category ? 'active' : ''}]] animate__animated animate__fadeIn" 
                           th:href="@{'/category/' + ${category}}" 
                           th:text="${category}"
                           th:style="'animation-delay: ' + ${iterStat.index * 0.1} + 's'"
                           ></a>
                    </li>
                </ul>
                
                <!-- 新建按钮 -->
                <div class="d-flex justify-content-end mb-3">
                    <button class="btn btn-primary animate__animated animate__fadeInRight" data-bs-toggle="modal" data-bs-target="#addWebsiteModal">
                        <i class="bi bi-plus-circle"></i> 新建网站
                    </button>
                </div>
                
                <!-- 网站列表 -->
                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                    <div class="col" th:each="website,iterStat : ${websites}">
                        <div class="card website-card h-100 animate__animated animate__fadeInUp" 
                             th:attr="data-index=${iterStat.index}"
                             th:style="'animation-delay: ' + ${iterStat.index * 0.1} + 's'">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <a th:href="${website.url}" target="_blank" th:text="${website.url}" class="text-decoration-none"></a>
                                </h5>
                                <p class="card-text" th:text="${website.description}"></p>
                                <div class="mb-2">
                                    <span class="badge category-badge" 
                                          th:classappend="${'category-color-' + (categories.indexOf(website.category) % 10)}" 
                                          th:text="${website.category}"></span>
                                </div>
                                <div class="small text-muted">
                                    <div th:if="${website.username}">
                                        <i class="bi bi-person"></i>
                                        <span th:text="${website.username}"></span>
                                    </div>
                                    <div th:if="${website.password}">
                                        <i class="bi bi-key"></i>
                                        <span th:text="${website.password}"></span>
                                    </div>
                                    <div th:if="${website.notes}">
                                        <i class="bi bi-chat"></i>
                                        <span th:text="${website.notes}"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">创建时间: <span th:text="${website.createdAt}"></span></small>
                                <div class="float-end">
                                    <button class="btn btn-sm btn-outline-primary edit-btn" 
                                            th:data-id="${website.id}">修改</button>
                                    <button class="btn btn-sm btn-outline-danger delete-btn" 
                                            th:data-id="${website.id}">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col" th:if="${#lists.isEmpty(websites)}">
                        <div class="alert alert-info text-center animate__animated animate__fadeIn">
                            暂无网站数据，请点击"新建网站"按钮添加数据。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 新建网站模态框 -->
    <div class="modal fade" id="addWebsiteModal" tabindex="-1" aria-labelledby="addWebsiteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addWebsiteModalLabel">添加新网站</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="websiteForm">
                        <div class="mb-3">
                            <label for="url" class="form-label">网站URL *</label>
                            <input type="url" class="form-control" id="url" required>
                            <div class="invalid-feedback">请输入有效的网站URL</div>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">功能描述 *</label>
                            <textarea class="form-control" id="description" rows="2" required></textarea>
                            <div class="invalid-feedback">请输入功能描述</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="password" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="password">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="category" class="form-label">分类 *</label>
                            <input type="text" class="form-control" id="category" required>
                            <div class="invalid-feedback">请输入分类</div>
                        </div>
                        <div class="mb-3">
                            <label for="notes" class="form-label">备注</label>
                            <textarea class="form-control" id="notes" rows="2"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveWebsiteBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 修改网站模态框 -->
    <div class="modal fade" id="editWebsiteModal" tabindex="-1" aria-labelledby="editWebsiteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editWebsiteModalLabel">修改网站信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editWebsiteForm">
                        <input type="hidden" id="editId">
                        <div class="mb-3">
                            <label for="editUrl" class="form-label">网站URL *</label>
                            <input type="url" class="form-control" id="editUrl" required>
                            <div class="invalid-feedback">请输入有效的网站URL</div>
                        </div>
                        <div class="mb-3">
                            <label for="editDescription" class="form-label">功能描述 *</label>
                            <textarea class="form-control" id="editDescription" rows="2" required></textarea>
                            <div class="invalid-feedback">请输入功能描述</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="editUsername" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="editUsername">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="editPassword" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="editPassword">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="editCategory" class="form-label">分类 *</label>
                            <input type="text" class="form-control" id="editCategory" required>
                            <div class="invalid-feedback">请输入分类</div>
                        </div>
                        <div class="mb-3">
                            <label for="editNotes" class="form-label">备注</label>
                            <textarea class="form-control" id="editNotes" rows="2"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="deleteWebsiteBtn">删除</button>
                    <button type="button" class="btn btn-primary" id="updateWebsiteBtn">更新</button>
                </div>
            </div>
        </div>
    </div>
    
    
    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确定要删除这个网站吗？此操作不可恢复。</p>
                    <input type="hidden" id="deleteId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后显示卡片动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.website-card');
            cards.forEach(card => {
                card.classList.add('show');
            });
        });
        
        // 保存网站
        document.getElementById('saveWebsiteBtn').addEventListener('click', function() {
            // 获取表单数据
            const url = document.getElementById('url').value;
            const description = document.getElementById('description').value;
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const category = document.getElementById('category').value;
            const notes = document.getElementById('notes').value;
            
            // 必填项验证
            let isValid = true;
            if (!url) {
                document.getElementById('url').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('url').classList.remove('is-invalid');
            }
            
            if (!description) {
                document.getElementById('description').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('description').classList.remove('is-invalid');
            }
            
            if (!category) {
                document.getElementById('category').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('category').classList.remove('is-invalid');
            }
            
            if (!isValid) {
                return;
            }
            
            const website = {
                url: url,
                description: description,
                username: username,
                password: password,
                category: category,
                notes: notes
            };
            
            fetch('/websites', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(website)
            })
            .then(response => response.json())
            .then(data => {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('addWebsiteModal'));
                modal.hide();
                
                // 清空表单
                document.getElementById('websiteForm').reset();
                
                // 重新加载页面以显示新数据
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('保存失败，请重试');
            });
        });
        
        // 修改网站按钮点击事件
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('edit-btn')) {
                const id = e.target.getAttribute('data-id');
                fetch(`/websites/${id}`)
                .then(response => response.json())
                .then(data => {
                    // 填充表单数据
                    document.getElementById('editId').value = data.id;
                    document.getElementById('editUrl').value = data.url;
                    document.getElementById('editDescription').value = data.description || '';
                    document.getElementById('editUsername').value = data.username || '';
                    document.getElementById('editPassword').value = data.password || '';
                    document.getElementById('editCategory').value = data.category || '';
                    document.getElementById('editNotes').value = data.notes || '';
                    
                    // 显示模态框
                    const modal = new bootstrap.Modal(document.getElementById('editWebsiteModal'));
                    modal.show();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('获取数据失败，请重试');
                });
            }
        });
        
        // 更新网站
        document.getElementById('updateWebsiteBtn').addEventListener('click', function() {
            // 获取表单数据
            const id = document.getElementById('editId').value;
            const url = document.getElementById('editUrl').value;
            const description = document.getElementById('editDescription').value;
            const username = document.getElementById('editUsername').value;
            const password = document.getElementById('editPassword').value;
            const category = document.getElementById('editCategory').value;
            const notes = document.getElementById('editNotes').value;
            
            // 必填项验证
            let isValid = true;
            if (!url) {
                document.getElementById('editUrl').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('editUrl').classList.remove('is-invalid');
            }
            
            if (!description) {
                document.getElementById('editDescription').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('editDescription').classList.remove('is-invalid');
            }
            
            if (!category) {
                document.getElementById('editCategory').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('editCategory').classList.remove('is-invalid');
            }
            
            if (!isValid) {
                return;
            }
            
            const website = {
                url: url,
                description: description,
                username: username,
                password: password,
                category: category,
                notes: notes
            };
            
            fetch(`/websites/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(website)
            })
            .then(response => response.json())
            .then(data => {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('editWebsiteModal'));
                modal.hide();
                
                // 重新加载页面以显示更新后的数据
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('更新失败，请重试');
            });
        });
        
        // 删除按钮点击事件（在主页面上）
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-btn')) {
                const id = e.target.getAttribute('data-id');
                document.getElementById('deleteId').value = id;
                
                // 显示确认模态框
                const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
                modal.show();
            }
        });
        
        // 删除按钮点击事件（在编辑页面上）
        document.getElementById('deleteWebsiteBtn').addEventListener('click', function() {
            const id = document.getElementById('editId').value;
            document.getElementById('deleteId').value = id;
            
            // 关闭编辑模态框
            const editModal = bootstrap.Modal.getInstance(document.getElementById('editWebsiteModal'));
            editModal.hide();
            
            // 显示确认模态框
            const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
            modal.show();
        });
        
        // 确认删除
        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            const id = document.getElementById('deleteId').value;
            
            fetch(`/websites/${id}`, {
                method: 'DELETE'
            })
            .then(() => {
                // 关闭确认模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal'));
                modal.hide();
                
                // 重新加载页面以显示删除后的数据
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('删除失败，请重试');
            });
        });
        
    </script>
</body>
</html>